<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片上传</title>
</head>

<body>
  <!-- 文件选择元素 -->
  <input type="file" class="upload">
  <img src="" alt="" class="my-img">

  <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：图片上传，显示到网页上
     *  1. 获取图片文件
     *  2. 使用 FormData 携带图片文件
     *  3. 提交到服务器，获取图片url网址使用
    */
    document.querySelector('input').addEventListener('change', function ({ target: { files } }) {
      const file = files[0]

      // const size = file.size / 1024 / 1024
      // console.log(size);
      // if (size > 0.001) {
      //   return alert('图片太大了')
      // }
      const fd = new FormData()
      fd.append('img', file)
      // 需要通过遍历foreach  获取成员
      fd.forEach((v, k) => {
        console.log(k, v);
      })
      axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
      }).then(res => {
        const url = res.data.data.url
        document.querySelector('.my-img').src = url
        // 将获取到的图片地址放到 展示页面上
        console.log(res.data.data.url);
      }).catch(err => { console.log(err); })
    })


  </script>
</body>

</html>